<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-image: url(../../images/grid.png);
      }
      .clock {
        width: 300px;
        height: 300px;
        margin: 10px;
        background-color: black;
        border-radius: 50px;
      }
      canvas {
        background-color: rgba(255, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <canvas id="tutorial" width="300" height="300px">
        你的浏览器不兼容Canvas,请升级您的浏览器!
      </canvas>
    </div>

    <script>
      window.onload = function () {
        let canvasEl = document.getElementById('tutorial')
        if (!canvasEl.getContext) {
          return
        }
        let ctx = canvasEl.getContext('2d') // 2d | webgl

        requestAnimationFrame(draw)
        function draw() {
          let date = new Date()
          let h = date.getHours()
          let m = date.getMinutes()
          let s = date.getSeconds()

          ctx.clearRect(0, 0, 300, 300)
          ctx.save()
          drawBg()
          drawNumbers()

          drawHouse(h, m, s)
          drawMinute(m, s)
          drawSecond(s)

          drawCicle()
          drawHoursTick()
          drawMinuteTick()
          ctx.restore()
          requestAnimationFrame(draw)
        }

        // 1.绘制白色背景
        function drawBg() {
          ctx.save()
          ctx.translate(150, 150)
          ctx.fillStyle = 'white'
          ctx.beginPath()
          ctx.arc(0, 0, 130, 0, Math.PI * 2)
          ctx.fill()
          ctx.restore()
        }

        // 2.绘制数字
        function drawNumbers() {
          ctx.save()
          ctx.translate(150, 150)
          ctx.font = '30px fangsong'
          ctx.textAlign = 'center'
          ctx.textBaseline = 'middle'
          let numbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
          for (let i = 0; i < numbers.length; i++) {
            let x = Math.cos(((Math.PI * 2) / 12) * i) * 100
            let y = Math.sin(((Math.PI * 2) / 12) * i) * 100
            ctx.fillText(numbers[i], x, y)
          }
          ctx.restore()
        }

        function drawHouse(h, m, s) {
          // 3.绘制时针
          ctx.save()
          ctx.translate(150, 150) // 坐标原点的中心
          ctx.rotate(
            ((Math.PI * 2) / 12) * h +
              ((Math.PI * 2) / 12 / 60) * m +
              ((Math.PI * 2) / 12 / 60 / 60) * s
          )
          ctx.lineWidth = 5
          ctx.lineCap = 'round'
          ctx.beginPath()
          ctx.moveTo(0, 0)
          ctx.lineTo(0, -50)
          ctx.stroke()
          ctx.restore()
        }

        function drawMinute(m, s) {
          // 4.绘制分钟
          ctx.save()
          ctx.translate(150, 150) // 坐标原点的中心
          ctx.rotate(((Math.PI * 2) / 60) * m + ((Math.PI * 2) / 60 / 60) * s)
          ctx.lineWidth = 3
          ctx.lineCap = 'round'
          ctx.beginPath()
          ctx.moveTo(0, 0)
          ctx.lineTo(0, -70)
          ctx.stroke()
          ctx.restore()
        }

        function drawSecond(s) {
          // 5.绘制秒钟
          ctx.save()
          ctx.translate(150, 150) // 坐标原点的中心
          ctx.rotate(((Math.PI * 2) / 60) * s)
          ctx.strokeStyle = 'red'
          ctx.lineWidth = 2
          ctx.lineCap = 'round'
          ctx.beginPath()
          ctx.moveTo(0, 0)
          ctx.lineTo(0, -80)
          ctx.stroke()
          ctx.restore()
        }

        function drawCicle() {
          // 6.绘制圆心
          ctx.save()
          ctx.translate(150, 150)
          ctx.beginPath()
          ctx.arc(0, 0, 8, 0, Math.PI * 2)
          ctx.fill()

          ctx.fillStyle = 'gray'
          ctx.beginPath()
          ctx.arc(0, 0, 5, 0, Math.PI * 2)
          ctx.fill()
          ctx.restore()
        }

        function drawHoursTick() {
          // 7.刻度
          ctx.save()
          ctx.translate(150, 150)
          for (let j = 0; j < 12; j++) {
            // 不需要乘以j，下一次旋转的坐标轴是上一次旋转的坐标轴
            ctx.rotate((Math.PI * 2) / 12)
            ctx.lineWidth = 4
            ctx.beginPath()
            ctx.moveTo(0, -130)
            ctx.lineTo(0, -122)
            ctx.stroke()
          }
          ctx.restore()
        }

        function drawMinuteTick() {
          // 8.分钟刻度
          ctx.save()
          ctx.translate(150, 150)
          for (let j = 0; j < 60; j++) {
            // 不需要乘以j，下一次旋转的坐标轴是上一次旋转的坐标轴
            ctx.rotate((Math.PI * 2) / 60)
            ctx.lineWidth = 1
            ctx.beginPath()
            ctx.moveTo(0, -130)
            ctx.lineTo(0, -126)
            ctx.stroke()
          }
          ctx.restore()
        }
      }
    </script>
  </body>
</html>
